<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
        *{
            margin:0px;
            padding:0px;
            list-style:none;
        }
        #list{
            width:300px;
            margin:0px auto;
            padding:0px;
            list-style:none;
            font-size:14px;
            position:relative;
        }

        #list li{
            color:skyblue;
            float:left;
            margin-left:10px;
        }

        #list::after{
            content:"";
            display:block;
            clear:both;
        }

        #l1{
            width:100px;
            border:1px solid #eee;
            display:none;
            position:absolute;

        }
    </style>
</head>
<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <ul id="l1" style="display:none;left:0px;top:0px">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
    <script>
        // var menus = ['有码','无码','中国','欧美','日本'];
        // 
        var menus = {'有码':['苍老师','波老师','饭老师','中老师','白老师'],'无码':['武藤兰','吉泽明步',' 小泽玛利亚','春叶','浅仓舞'],'中国':['翁虹','叶玉卿','李丽珍','叶子楣','舒淇'],'欧美':['路人A','路人B','路人C','路人D','路人E'],'日本':['武藤兰','吉泽明步',' 小泽玛利亚','春叶','浅仓舞']};

        var list = document.getElementById('list');

        var lis = list.getElementsByTagName("li");

        var list1 = document.getElementById('l1');

        var lis1 = list1.getElementsByTagName("li");

        var num = 0;

        for(var i  in menus)
        {   
            (function(num,i)
            {
                lis[num].innerHTML = i;
               
                lis[num].onmouseover = function(en){

                    var x = en.x;
                    
                    var y = en.y;

                    list1.style.left = x+"px";

                    list1.style.top = y+"px";

                    list1.style.display = "block";

                    for(var j in lis1){
                        
                        lis1[j].innerHTML = menus[i][j];

                        lis1[j].onmouseover = function()
                        {
                            list1.style.display = "block";

                            list1.style.cursor = 'pointer';

                            this.style.backgroundColor = "#eee";
                        }
                        
                        lis1[j].onmouseout = function()
                        {
                            list1.style.display = "none";

                            this.style.backgroundColor = "";
                        }
                    }
                
                }

                lis[num].onmouseout = function(){
                    list1.style.display="none";
                }
            })(num,i);

            num++;
        }
    </script>
</html>